<template>
	<view class="container">
		<view class="bg1">
			<image src="../../static/images/share_bg1.png"></image>
		</view>
		<view class="invite-title">
			<view class="invite-title-main">邀请好友获福利</view>
			<view class="invite-title-sub">可免费获得99元AI报考助手</view>
		</view>
		<view class="bg2-box">
			<view class="bg2">
				<image src="../../static/images/share_bg2.png"></image>
			</view>
			<view class="bg2-title-box">
				<view class="bg2-title">分享好友</view>
				<view class="bg2-title-sub">成功分享5位好友并成功注册，你将获得AI智能报考助手功能。</view>
			</view>
			<view class="label-box">
				<view class="label-item label-item-left">分享给好友</view>
				<view class="label-item label-item-center">好友注册</view>
				<view class="label-item label-item-right">获得权限</view>
			</view>
		</view>
		<view class="invite-info-box">
			<view class="info-item-box">
				<view class="info-item-label">我的邀请码：</view>
				<view class="info-item-num">967538</view>
			</view>
			<view class="info-item-box">
				<view class="info-item-label">已邀请好友：</view>
				<view class="info-item-num">5人</view>
			</view>
		</view>
		<view class="submit-btn" @tap="showMask">分享给好友</view>
		
		<view class="mask" v-show="isShowMask"></view>
		<view class="mask-box" v-show="isShowMask">
			<view class="guide-box">
				<view class="guide-img">
					<image mode="widthFix" src="../../static/images/share_guide.png"></image>
				</view>
			</view>
			<view class="guide-title">点击分享至微信好友</view>
			<view class="guide-btn" @tap="hideMask">知道了</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowMask: false
			}
		},
		
		methods: {
			
			showMask() {
				this.isShowMask = true
			},
			
			hideMask() {
				this.isShowMask = false
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	
	.mask {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: #000000;
		opacity: 0.5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mask-box {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 11;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.guide-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	
	.guide-img {
		margin-right: 110rpx;
	}
	
	.guide-img image {
		width: 430rpx;
	}
	
	.guide-title {
		color: #ffffff;
		font-size: 48rpx;
	}
	
	.guide-btn {
		width: 270rpx;
		height: 120rpx;
		border: 4rpx solid #ffffff;
		border-radius: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 48rpx;
		margin-top: 380rpx;
	}
	
	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.bg1 {
		width: 750rpx;
		z-index: 1;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.bg1 image {
		width: 750rpx;
		height: 610rpx;
	}
	
	.invite-title {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 2;
		position: relative;
		top: 66rpx;
	}
	
	.invite-title-main {
		color: #ffffff;
		font-size: 72rpx;
	}
	
	.invite-title-sub {
		color: #ffffff;
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	
	.bg2-box {
		width: 666rpx;
		height: 464rpx;
		position: relative;
		z-index: 3;
		top: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.bg2 {
		position: absolute;
	}
	
	.bg2 image {
		width: 666rpx;
		height: 464rpx;
	}
	
	.bg2-title-box {
		width: 516rpx;
		position: relative;
		z-index: 4;
		top: 40rpx;
	}
	
	.bg2-title {
		color: #333333;
		font-weight: bold;
		font-size: 30rpx;
	}
	
	.bg2-title-sub {
		color: #666666;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	
	.label-box {
		position: relative;
		z-index: 4;
		width: 666rpx;
		display: flex;
		flex-direction: row;
		top: 260rpx;
	}
	
	.label-item {
		color: #333333;
		font-size: 24rpx;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.label-item-left {
		margin-left: 68rpx;
	}
	
	.label-item-center {
		margin-left: 96rpx;
	}
	
	.label-item-right {
		margin-left: 108rpx;
	}
	
	.invite-info-box {
		position: relative;
		width: 666rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 5;
		top: 200rpx;
	}
	
	.info-item-box {
		width: 316rpx;
		height: 192rpx;
		background-color: #ffffff;
		color: #1f1f1f;
		font-size: 30rpx;
		border-radius: 46rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.info-item-label {
		margin-top: 50rpx;
	}
	
	.info-item-num {
		margin-top: 20rpx;
	}
	
	.submit-btn {
		position: relative;
		width: 556rpx;
		height: 92rpx;
		z-index: 6;
		top: 300rpx;
		border-radius: 46rpx;
		background-color: #ff3d48;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 36rpx;
	}
</style>
